<template>
  <div class="Publish">

    <div id="container" style="width:500px; height:300px"></div>


  </div>
</template>
  
<style scoped>
.Publish {
  color: rgb(69, 139, 147);
  padding: 10px 10px 10px 10px;
}
</style>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import { ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus';

import axiosInstance from '../../js/axiosself'



export default {
  name: 'LoginView',
  setup() {
    const userName = ref('');
    const password = ref('');
    const router = useRouter();
    // 构造地图对象的方法一：使用地图容器ID创建




    const Login = async () => {
      try {
        const response = await axiosInstance.get(`/login?userid=${userName.value}&passward=${password.value}`);
        const token = response.data.data;

        localStorage.setItem('token', token);

        if (token !== null) {

          router.push('/Main');

          localStorage.setItem("myuserid", userName.value);

          ElMessage({
            message: '登陆成功！',
            type: 'success',
          });
        } else {
          console.log('登录失败');
          ElMessage.error('账号或密码错误！');
        }
      } catch (error) {
        console.error(error);
      }
    };

    return { userName, password, Login };
  },
};
</script>